<template>
  <el-card header="通知中心">
    <div class="list">
      <div
        :class="it.is_show ? 'list-item ac' : 'list-item'"
        v-for="it in tableData"
        :key="it"
      >
        <div class="list-item-layout" @click="setShow(it)">
          <div class="list-item-layout-tx">
            {{ it.title }}
          </div>
          <div class="list-item-layout-r">
            <div class="list-item-layout-r-tiem">
              <span style="margin-right: 20px">发布人：{{ it.createBy }}</span>
              <span> {{ it.createTime || '' }}</span>

            </div>
            <el-icon color="#999999" size="18" v-if="it.is_show">
              <ArrowUpBold />
            </el-icon>
            <el-icon color="#999999" size="18" v-else>
              <ArrowDownBold />
            </el-icon>
          </div>
        </div>
        <div
          class="list-item-content"
          v-if="it.is_show"
          @click="MRichPopupOpen(it.businessKey, it.title)"
        >
          {{ it.content }}
        </div>
      </div>
    </div>
    <!--分页-->
    <div class="m-table__pagination" v-if="tableData.length > 0">
      <div class="m-table__pagination__total">
        共 {{ dataTotal }} 条记录 第 {{ params.pageNum }} /
        {{ Math.ceil(dataTotal / params.pageSize) }} 页
      </div>
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        v-model:currentPage="params.pageNum"
        v-model:page-size="params.pageSize"
        :total="dataTotal"
        @size-change="handleSizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
    <MRichPopup ref="MRichPopupRef" />
  </el-card>
</template>

<script setup lang="ts">
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { noticePage } from '@/api/spotCheck/spotCheck'
import { useRouter } from 'vue-router'
import MRichPopup from './popup/popup.vue'
const router = useRouter()
onMounted(() => {
  reload()
})

const MRichPopupRef = ref()
const MRichPopupOpen = (id, title) => {
  MRichPopupRef.value.show(id, title)
}
/*
分页
 */
const dataTotal = ref(0)
const params: any = ref({
  pageNum: 1,
  pageSize: 20
})

function handleSizeChange(e) {
  params.value.pageNum = 1
  params.value.pageSize = e
  init()
}

function currentChange(e) {
  params.value.pageNum = e
  init()
}

const loading = ref(false)
const tableData = ref([])
const init = () => {
  loading.value = true
  noticePage(params.value)
    .then((res) => {
      res.data.list.forEach((i) => (i.is_show = false))
      tableData.value = res.data.list
      dataTotal.value = res.data.total
    })
    .finally(() => {
      loading.value = false
    })
}

const reload = () => {
  params.value.pageNum = 1
  init()
}

const setShow = (it) => {
  console.log('it', it)
  if (it.is_show) {
    it.is_show = false
  } else {
    tableData.value.forEach((i) => {
      i.is_show = false
    })
    it.is_show = true
  }
}

const toPage = (it) => {
  switch (it.source.value) {
    case 1:
      router.push({
        path: '/spotCheck/informationDisclosure',
        query: {
          id: it.businessKey
        }
      })
  }
}
</script>
<style lang="scss" scoped>
.list {
  padding-bottom: 30px;
  width: 100%;

  .list-item {
    width: 100%;

    .list-item-layout {
      width: 100%;
      padding: 31px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e9e9e9;
      cursor: pointer;

      .list-item-layout-tx {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .list-item-layout-r {
        //width: 200px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .list-item-layout-r-tiem {
          height: 30px;
          font-family: 思源黑体 CN, 思源黑体 CN;
          font-weight: 400;
          font-size: 18px;
          color: #333333;
          //line-height: 0px;
          text-align: right;
          //font-style: normal;
          //text-transform: none;
          margin-right: 20px;
          display: flex;
          align-items: center;
          span{
            height: 100%;
          }
        }
      }
    }

    .list-item-content {
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      line-height: 30px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 20px 30px;
      box-sizing: border-box;
      cursor: pointer;
    }
    .list-item-content:hover {
      color: #0c7cff;
    }
  }

  .ac {
    box-shadow: 0px 0px 16px 1px rgba(9, 81, 129, 0.16);
  }
}

:deep(.el-card__body) {
  padding: 0;
}

.m-table__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px 30px 30px;
  box-sizing: border-box;

  &__total {
    color: #0000006d;
  }
}

.noData {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  padding: 60px 0;

  img {
    width: calc(800px / 2);
    height: calc(709px / 2);
    margin-bottom: 30px;
  }

  span {
    color: #999;
  }
}
</style>
